<template>
  <li @click="toDetail(item.contentId)" class="cover-li">
    <div class="wrapper">
      <img :src="item.coverUrl" v-default-img="defaultImg" />
    </div>
    <div class="info">
      <h3 v-text="item.contentName" class="ellipsis contentName"></h3>
      <p v-text="item.authorName" class="ellipsis authorName"></p>
    </div>
  </li>
</template>

<script>
export default {
  data() {
    return {
      defaultImg: require("@/assets/images/default-cover.png"),
    };
  },
  props: {
    item: {
      type: Object,
    },
    diff: {
      type: String,
    },
  },
  components: {},
  computed: {},
  watch: {},
  created() {},
  mounted() {},
  methods: {
    toDetail(id) {
      this.$router.push({
        name: "bookDetail",
        params: { id },
      });
    },
  },
};
</script>

<style lang="scss" scoped>
.cover-li {
  width: 120px;
  cursor: pointer;
  .wrapper {
    margin-bottom: 16px;
    img {
      width: 120px;
      height: 160px;
      border-radius: 8px;
      box-shadow: 0px 1px 3px 1px rgba(0, 0, 0, 0.2);
    }
  }
  .info {
    font-size: 14px;
    line-height: 20px;
    .authorName {
      color: #999999;
      font-family: PingFangSC-Regular, PingFang SC;
    }
  }
}
</style>
